<!doctype html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <link rel="stylesheet" href="{{ url_for('static', filename='plugins/bootstrap-3.4.1/css/bootstrap.min.css') }}">
    <link rel="stylesheet"
          href="{{ url_for('static', filename='plugins/font-awesome-4.7.0/css/font-awesome.min.css') }}">
    {% block head %}{% endblock %}
    <title>{% block title %}{% endblock %}</title>
    <meta name="csrf_token" content="{{ csrf_token() }}">
    <style>
        body {
            min-height: 100vh; /* 让body至少占满整个视口高度 */
            display: flex;
            flex-direction: column;
            background-color: #eeeeee;
            font-family: 华文仿宋;
        }

        {#main {#}
        {#    flex: 1; /* 让main占据剩余空间，使footer总是贴着底部 */#}
        {#/}#}

        body::before {
            display: block;
            content: '';
            height: 65px;
        }
    </style>
</head>
<body>
<nav class="navbar navbar-inverse navbar-fixed-top">
    <div class="container">
        <div class="navbar-header">
            <a href="{{ url_for("business.views") }}">
                <p class="navbar-text" style="font-size: x-large;font-weight: bold">SparkML推荐系统项目</p>
            </a>
        </div>
        <div class="collapse navbar-collapse" id="navmenu">
            <ul class="nav navbar-nav navbar-right">
                <li><a href="#"><h5 style="font-size: large;">商品推荐</h5></a></li>
                <li><a href="#"><h5 style="font-size: large;">知识图谱</h5></a></li>
                <li><a href="#"><h5 style="font-size: large;">智能问答</h5></a></li>
                <li class="dropdown">
                    {% if g.user.user_id %}
                        <a href="{{ url_for("business.logout") }}" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">
                            <h5 style="font-size: large;display: inline-block">你好，{{ g.user.account }}客户</h5><span class="caret"></span>
                        </a>
                    {% else %}
                        {# data-toggle="dropdown" 去掉下拉作用 #}
                        <a href="{{ url_for("business.login") }}" class="dropdown-toggle" role="button" aria-haspopup="true" aria-expanded="false">
                            <h5 style="font-size: large;">您好，请登录</h5>
                        </a>
                    {% endif %}
                <ul class="dropdown-menu">
                    <li role="separator" class="divider"></li>
                    <li><a href="{{ url_for("business.logout") }}"> <h5 style="font-size: large;">退出登录</h5></a></li>
                </ul>
                </li>
            </ul>
        </div>
    </div>
</nav>

<div class="container" style="background-color: #ffffff;padding: 0;flex: 1;">
    <div class="panel">
        <div class="panel-body">
            <!-- 页面主要内容 -->
            {% block body %}{% endblock %}
        </div>
    </div>
</div>


<!--页脚-->
<footer class="bg-dark text-white text-center">
    <div class="container">
        <p>
            Copyright &copy; 2024,
            <a href="#" class="text-light">Lorem ipsum dolor;</a>
            <a href="#" class="text-light">Lorem ipsum dolor sit.</a><br>
            <a href="#" class="text-light">Lorem ipsum dolor sit.</a>
            <a href="#" class="text-light">Lorem ipsum dolor sit amet, consectetur.</a> China
        </p>
    </div>
</footer>
<script type="text/javascript" src="{{ url_for('static', filename='js/jquery-3.6.0.min.js') }}"></script>
<script type="text/javascript"
        src="{{ url_for('static', filename='plugins/bootstrap-3.4.1/js/bootstrap.min.js') }}"></script>
<script>
    $(function () {
        // 使用Ajax防御CSRF攻击
        var csrftoken = $('meta[name=csrf_token]').attr('content')
        $.ajaxSetup({
            beforeSend: function (xhr, settings) {
                if (!/^(GET|HEAD|OPTIONS|TRACE)$/i.test(settings.type) && !this.crossDomain) {
                    xhr.setRequestHeader("X-CSRFToken", csrftoken)
                }
            }
        })
    })
</script>
{% block js %}{% endblock %}
</body>
</html>